import React, { useEffect, useState } from 'react'
import './My_list.css'
import axios from 'axios'
import { useNavigate } from 'react-router-dom';
import { Input, Radio } from 'antd-mobile'
// 正确弹窗组件
const CorrectModal = ({ onClose }) => (
    <div className="modal-container">
        <div className="modal-content correct">
            <h3>🎉 回答正确！</h3>
            <p>恭喜你猜对了！元宵节快乐！</p>
            <button onClick={onClose}>关闭</button>
        </div>
    </div>
)

// 错误弹窗组件
const WrongModal = ({ onClose }) => (
    <div className="modal-container">
        <div className="modal-content wrong">
            <h3>❌ 回答错误</h3>
            <p>再仔细想一想哦~</p>
            <button onClick={onClose}>关闭</button>
        </div>
    </div>
)

function Cai_ding_mi_nei() {
    const navigate = useNavigate();
    const [caiCate, setCaiCate] = useState([])
    const [caiList, setList] = useState([
        { id: 1, name: '元宵节' },
        { id: 2, name: '端午节' },
        {
            id: 3,
            name: '中秋节'
        }, {
            id: 4,
            name: '春节'
        }
    ])
    const [showCorrect, setShowCorrect] = useState(false)
    const [showWrong, setShowWrong] = useState(false)
    const [timeLeft, setTimeLeft] = useState(10)
    useEffect(() => {
        getCaicate()

        const timer = setInterval(() => {
            setTimeLeft((prevTime) => {
                if (prevTime <= 0) {
                    clearInterval(timer)
                    navigate('/caidengmi')
                }
                return prevTime - 1
            })
        }, 1000)

        return () => clearInterval(timer)
    }, [navigate])
    const getCaicate = async () => {
        let data = await axios.get('http://localhost:3000/Cai_Cate')
        console.log(data);
        setCaiCate(data.data.data)
    }
    // const getList = async () => {
    //     // let data = await axios.get('http://localhost:3000/Cai_List')
    // // console.log(data);
    // setList(data.data.data)
    // }

    // 处理分类点击
    const handleCategoryClick = (answer) => {
        console.log(answer);
        if (answer === '元宵节') {
            setShowCorrect(true);
            setShowWrong(false);
        } else {
            setShowWrong(true);
            setShowCorrect(false);
        }
    };

    return (
        <div className='Cai_ding_mi_nei_box'>
            <div className="caiDing_mi_top">
                <div className="dingdan_detail_left">
                    <p >9:41</p>
                </div>
                <div className="dingdan_detail_right">
                    <h3 className='dingdan_detail_right_h3'>
                        <svg t="1739181732005" class="icon" viewBox="0 0 1294 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4224" width="20" height="20"><path d="M0 727.578947l188.631579 0 0 296.421053-188.631579 0 0-296.421053Z" p-id="4225" fill="#2c2c2c"></path><path d="M269.473684 565.894737l188.631579 0 0 458.105263-188.631579 0 0-458.105263Z" p-id="4226" fill="#2c2c2c"></path><path d="M565.894737 377.263158l161.684211 0 0 646.736842-161.684211 0 0-646.736842Z" p-id="4227" fill="#2c2c2c"></path><path d="M835.368421 188.631579l188.631579 0 0 835.368421-188.631579 0 0-835.368421Z" p-id="4228" fill="#2c2c2c"></path><path d="M1104.842105 0l188.631579 0 0 1024-188.631579 0 0-1024Z" p-id="4229" fill="#2c2c2c"></path></svg>
                    </h3>
                    <h3 className='dingdan_detail_right_h31'>
                        <svg t="1739181875778" class="icon" viewBox="0 0 1346 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8311" width="20" height="20"><path d="M614.762225 324.416035a578.94361 578.94361 0 0 0-397.653943 238.117618 89.918541 89.918541 0 1 0 154.434563 92.115133 407.432318 407.432318 0 0 1 262.421842-151.458536c118.438803-12.683545 237.054751 43.400399 352.482099 166.834678a89.95397 89.95397 0 0 0 131.370351-122.867416c-194.575504-207.825911-380.966932-235.81474-503.054912-222.741477z m60.866846 354.288972a172.645016 172.645016 0 1 0 172.574158 172.574159 172.645016 172.645016 0 0 0-172.645016-172.715874zM630.846944 0.985632C291.615253 16.609776 64.232591 258.695431 22.107632 307.055875a89.918541 89.918541 0 0 0 135.621819 118.049086c20.655047-23.701932 209.668214-232.023848 481.407855-244.459391 185.222275-8.502935 372.003421 75.746982 555.135391 250.553161a89.918541 89.918541 0 0 0 124.001141-130.130339C1098.366672 90.939602 867.015973-9.997326 630.846944 0.985632z" p-id="8312" fill="#2c2c2c"></path></svg>
                    </h3>
                    <h3 className='dingdan_detail_right_h32'>
                        <svg t="1739182052804" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9429" width="20" height="20"><path d="M984.2 434.8c-5-2.9-8.2-8.2-8.2-13.9v-99.3c0-53.6-43.9-97.5-97.5-97.5h-781C43.9 224 0 267.9 0 321.5v380.9C0 756.1 43.9 800 97.5 800h780.9c53.6 0 97.5-43.9 97.5-97.5v-99.3c0-5.8 3.2-11 8.2-13.9 23.8-13.9 39.8-39.7 39.8-69.2v-16c0.1-29.6-15.9-55.5-39.7-69.3zM912 702.5c0 12-6.2 19.9-9.9 23.6-3.7 3.7-11.7 9.9-23.6 9.9h-781c-11.9 0-19.9-6.2-23.6-9.9-3.7-3.7-9.9-11.7-9.9-23.6v-381c0-11.9 6.2-19.9 9.9-23.6 3.7-3.7 11.7-9.9 23.6-9.9h780.9c11.9 0 19.9 6.2 23.6 9.9 3.7 3.7 9.9 11.7 9.9 23.6v381z" p-id="9430" fill="#2c2c2c"></path><path d="M736 344v336c0 8.8-7.2 16-16 16H112c-8.8 0-16-7.2-16-16V344c0-8.8 7.2-16 16-16h608c8.8 0 16 7.2 16 16z" p-id="9431" fill="#2c2c2c"></path></svg>
                    </h3>
                </div>

            </div>
            <div className="caiDing_mi_cai_deingMI">
                <div className="caiDing_mi_cai_deingMI_left" onClick={() =>{
                    navigate('/youyuan_hui')
                }}>
                    <svg t="1739523517581" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5285" width="25" height="25"><path d="M305.519192 557.640404c-11.636364 0-23.40202-4.39596-32.323232-13.317172-17.842424-17.842424-17.842424-46.674747 0-64.517171L683.830303 69.30101c17.842424-17.842424 46.674747-17.842424 64.517172 0 17.842424 17.842424 17.842424 46.674747 0 64.517172L337.713131 544.323232c-8.921212 8.921212-20.557576 13.317172-32.193939 13.317172z m0 0" fill="#f8d4a3" p-id="5286"></path><path d="M715.894949 968.145455c-11.636364 0-23.40202-4.39596-32.323232-13.317172L273.19596 544.323232c-17.842424-17.842424-17.842424-46.674747 0-64.517171 17.842424-17.842424 46.674747-17.842424 64.517171 0l410.505051 410.50505c17.842424 17.842424 17.842424 46.674747 0 64.517172-8.921212 8.921212-20.557576 13.317172-32.323233 13.317172z m0 0" fill="#f8d4a3" p-id="5287"></path></svg>
                </div>
                <div className="caiDing_mi_cai_deingMI_right">
                    <p style={{
                        fontSize: '22px',
                        // color: '#999',
                        // marginLeft: '10px',
                        // lineHeight: '20px'
                    }}>
                        猜灯谜
                    </p>
                </div>
            </div>
            <div className="Cai_ding_mi_nei_box_time">
                <div className="Cai_ding_mi_nei_box_time_hei">
                    {timeLeft}
                </div>
            </div>
            {/* 弹窗显示 */}
            {showCorrect && <CorrectModal onClose={() => setShowCorrect(false)} />}
            {showWrong && <WrongModal onClose={() => setShowWrong(false)} />}

            <div className="Cai_ding_mi_nei_jieri_yuan_box">
                <div className="Cai_ding_mi_nei_jieri_yuan_box_bei">

                    <div className="Cai_ding_mi_nei_jieri_yuan_box_bei_top">
                        {
                            caiCate.map((item, index) => {
                                return (
                                    <div key={index}

                                    >

                                        <p>{item.name}</p>
                                    </div>
                                )
                            })
                        }
                    </div>
                </div>
                <div className="Cai_ding_mi_nei_jieri_yuan_box_center">
                    <p>
                        【打一节日】
                    </p>
                </div>
                <div className="Cai_ding_mi_nei_jieri_yuan_box_bottom">
                    {
                        caiList.map((item, index) => {
                            return (
                                <div key={index}
                                    onClick={() => handleCategoryClick(item.name)}
                                    // className="category-item"
                                    className='Cai_ding_mi_nei_jieri_yuan_box_bottom_box'  >
                                    <p className='Cai_ding_mi_nei_jieri_yuan_box_bottom_box_p1'>{item.name}</p>
                                </div>
                            )
                        })
                    }
                </div>
            </div>

            <div className="Cai_ding_mi_nei_shizi">

            </div>
            <div className="Cai_ding_mi_nei_btn_btn" >
                <p onClick={() =>{
                    navigate('/caidengmi')
                }}>
                    重选灯谜
                </p>
            </div>
        </div>
    )
}

export default Cai_ding_mi_nei;